<template>
  <div>
    <el-dialog
      title="编辑选择题"
      :visible.sync="editVisible"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false">



      <el-form :model="dataForm" :rules="dataForm_rules" ref="dataForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="题目内容：" prop="ch_title">
          <el-input type="textarea" v-model="dataForm.ch_title"></el-input>
        </el-form-item>

        <el-form-item label="选项A：" prop="ch_choose_A">
          <el-input type="textarea" v-model="dataForm.ch_choose_A"></el-input>
        </el-form-item>

        <el-form-item label="选项B：" prop="ch_choose_B">
          <el-input type="textarea" v-model="dataForm.ch_choose_B"></el-input>
        </el-form-item>

        <el-form-item label="选项C：" prop="ch_choose_C">
          <el-input type="textarea" v-model="dataForm.ch_choose_C"></el-input>
        </el-form-item>

        <el-form-item label="选项D：" prop="ch_choose_D">
          <el-input type="textarea" v-model="dataForm.ch_choose_D"></el-input>
        </el-form-item>

        <el-form-item label="类型：" prop="f_ch_type">
          <el-select v-model="dataForm.f_ch_type" placeholder="类型">
            <el-option label="单选题" value="1"></el-option>
            <el-option label="多选题" value="2"></el-option>
          </el-select>
        </el-form-item>

        <!--单选题答案选项-->
        <el-form-item label="选项：" prop="radioAnswer" v-if="dataForm.f_ch_type == '1'">
          <el-radio-group v-model="dataForm.radioAnswer">
            <el-radio label="A" value="A"></el-radio>
            <el-radio label="B" value="B"></el-radio>
            <el-radio label="C" value="C"></el-radio>
            <el-radio label="D" value="D"></el-radio>
          </el-radio-group>
        </el-form-item>


        <!--多选题答案-->
        <el-form-item label="选项：" prop="checkBoxAnswer" v-if="dataForm.f_ch_type == '2'">
          <el-checkbox-group v-model="dataForm.checkBoxAnswer">
            <el-checkbox label="A" name="checkBoxAnswer"></el-checkbox>
            <el-checkbox label="B" name="checkBoxAnswer"></el-checkbox>
            <el-checkbox label="C" name="checkBoxAnswer"></el-checkbox>
            <el-checkbox label="D" name="checkBoxAnswer"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取 消</el-button>
        <el-button type="primary" @click="updateInfo">确 定</el-button>
     </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getAllSubject,addChoose,deleteChoose,updateChoose,findChoose} from '@/api/questions'
  export default{
    props:["editShow","selectedData"],
    data(){
      return {
        editVisible:this.editShow,
        dataForm:{
          ch_id:0,
          sb_id:0,
          ch_title:"",
          ch_choose_A:"",
          ch_choose_B:"",
          ch_choose_C:"",
          ch_choose_D:"",
          ch_type:"",
          chooseAnswerList:[],

          radioAnswer:"", //单选题答案
          checkBoxAnswer:[], //多选题答案
          f_sb_id:0,
          f_ch_type:"1"
        },

        options:[], //选择所属科目
        dataForm_rules:{
          f_sb_id:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_title:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_A:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_B:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_C:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          ch_choose_D:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          f_ch_type:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          radioAnswer:[
            { required: true, message: '不能为空', trigger: 'change' }
          ],
          checkBoxAnswer:[
            { required: true, message: '不能为空', trigger: 'change' }
          ]
        }
      }
    },
    created(){
      let EditDataForm = JSON.parse(JSON.stringify(this.selectedData));

      this.dataForm.ch_id = EditDataForm.ch_id;
      this.dataForm.sb_id = EditDataForm.sb_id;
      this.dataForm.ch_title = EditDataForm.ch_title;
      this.dataForm.ch_choose_A = EditDataForm.ch_choose_A;
      this.dataForm.ch_choose_B = EditDataForm.ch_choose_B;
      this.dataForm.ch_choose_C = EditDataForm.ch_choose_C;
      this.dataForm.ch_choose_D = EditDataForm.ch_choose_D;
      this.dataForm.f_ch_type = EditDataForm.ch_type+"";

      if(EditDataForm.ch_type == 1){ //单选题
        for(let i = 0;i < EditDataForm.chooseAnswerList.length;i ++){
          this.dataForm.radioAnswer = EditDataForm.chooseAnswerList[i].ca_answer;
        }
      }else{
          for(let i = 0;i < EditDataForm.chooseAnswerList.length;i ++){
            this.dataForm.checkBoxAnswer.push(EditDataForm.chooseAnswerList[i].ca_answer);
          }
      }


    },
    methods:{

      //关闭弹出框
      closeAdd(){
        this.editVisible = false;
        this.$emit("closeDialog",2);
      },

      //添加信息
      updateInfo(){
        this.$refs["dataForm"].validate((valid) =>{
           if(valid){
             //对一些特殊数据进行重新封装
             this.dataForm.ch_type = parseInt(this.dataForm.f_ch_type);
             this.dataForm.chooseAnswerList = [];
             if( this.dataForm.ch_type == 1){ //单选
               this.dataForm.chooseAnswerList.push({ca_answer:this.dataForm.radioAnswer})
             }else{ //多选
               for(let i = 0;i < this.dataForm.checkBoxAnswer.length;i ++){
                 this.dataForm.chooseAnswerList.push({ca_answer:this.dataForm.checkBoxAnswer[i]});
               }
             }
             updateChoose(this.dataForm).then(res=>{
                 if(res.code == 200){
                   this.$message({
                     type: 'success',
                     message: '修改成功'
                   });
                   this.closeAdd();
                 }else{
                   this.$message({
                     type: 'error',
                     message: '修改失败'
                   });
                 }
             });

           } else{

           }

        });
      }
    }
  }
</script>
